<template>
  <div class="app-container">
   <h2 >每日秒杀</h2>
   
    <!-- 查询表单 -->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="query.sessionName" placeholder="场次名称"/>
        </el-form-item>
 
        <el-button type="primary" icon="el-icon-search" @click="getListCondition()">查询</el-button>
        <el-button type="default" @click="openSessionDialog()" >新增</el-button>
        <el-button type="default" @click="resetData()">批量删除</el-button>
    </el-form>
   <!-- 表格 -->
    <el-table :data="list" border fit highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        
        <el-table-column label="id" width="200" align="center">
            <template slot-scope="scope">
            <!-- {{ (page - 1) * limit + scope.$index + 1 }} -->
                {{scope.row.id}}
            </template>
        </el-table-column>

        <el-table-column prop="name" label="场次名称" width="80" />

        <el-table-column prop="startTime" label="每日开始时间" />

        <el-table-column prop="endTime" label="每日结束时间" />
        <el-table-column label="启用状态" width="80">
                <template slot-scope="scope">
                    {{ scope.row.status==true?'已启用':'未启用' }}
                </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间"/>

        <el-table-column label="操作" width="400" align="center">
            <template slot-scope="scope">
                 <router-link :to="'/secondkill/relative'">
                    <el-button type="primary" size="mini" 
                        icon="el-icon-edit">关联商品</el-button>
                </router-link>
                <el-button type="primary" size="mini" icon="el-icon-edit"
                    @click="updateGoods(scope.row)">修改</el-button>
                
                <el-button type="danger" size="mini" icon="el-icon-delete" 
                    @click="removeSessionById(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination :current-page="page" :page-size="limit" :total="total"
    style="padding: 30px 0; text-align: center;" layout="total, prev, pager, next, jumper"
        @current-change="getList"/>
    <!-- 添加和修改场次表单 -->
    <el-dialog :visible.sync=" dialogGoodsFormVisible" title="新增场次">
      <el-form :model="goodsSave" label-width="120px">
        <el-form-item label="id">
          <el-input v-model="goodsSave.id" />
        </el-form-item>
        <el-form-item label="场次名称">
          <el-input v-model="goodsSave.name" />
        </el-form-item>
         <el-form-item label="每日开始时间">
          <el-input v-model="goodsSave.startTime" />
        </el-form-item>

        <el-form-item label="每日结束时间">
          <el-input v-model="goodsSave.endTime" />
        </el-form-item>

         <el-form-item label="是否启用">
          <el-radio-group v-model="goodsSave.status">
            <el-radio :label="true">已启用</el-radio>
            <el-radio :label="false">未启用</el-radio>
          </el-radio-group>
        </el-form-item>
       
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click=" dialogGoodsFormVisible = false">取 消</el-button>
       
        <el-button type="primary" @click="saveOrUpdateGoods">确 定</el-button>
       
      </div>
    </el-dialog>
    

  </div>
</template>
<script>
import secondKill from '@/api/edu/secondKill'
export default {
  data() {
    return {
        list:null,  //查询之后接口返回的结果
        page:1,       //当前页
        limit:5,      //每页记录数
        total:0,        //总记录数
        query:{
            sessionName:''
        },     //条件封装对象
        dialogGoodsFormVisible:false,
        
        goodsSave:{
           id:"",
           endTime: "2021-05-10 6:53:45",
           name: "",
           startTime: "2021-05-10 6:53:45",
           status: false
        },
        dialogRelativeFormVisible:false
        
    };
  },
  created() {
    this.getList()
  },
  methods: {

    /**************************************场次操作********************************************/
    //打开场次弹框
    openSessionDialog() {
      this.goodsSave={
            id:"",
            endTime: "2021-05-10 6:53:45",
            name: "",
            startTime: "2021-05-10 6:53:45",
            status: false,
            save:true
      }
      //弹框
      this. dialogGoodsFormVisible = true;

    },
     //场次列表的方法
    getList(page=1){
        this.page = page
        secondKill.getSessionListPage(this.page,this.limit)
            .then(response=>{
                this.list=response.data.records
                this.total=response.data.total
    
            })
            .catch(err=>{
                console.log(err)
            })
    },
    //场次id的条件查询
    getListCondition(page=1){
        this.page = page
       
        secondKill.getSessionListPageCondition(this.page,this.limit,this.query)
            .then(response=>{
                this.list=response.data.page
                console.log(response.data)
            })
            .catch(err=>{
                console.log(err)
            })
    },
    //新建场次保存
    saveOrUpdateGoods(){
        //save
        console.log(this.goodsSave.save==true)
        if(this.goodsSave.save==true){
           
            secondKill.saveSession(this.goodsSave)
                .then(response=>{
                    //添加成功提示信息
                    this.$message({
                        type: 'success',
                        message: '添加成功!'
                    });
                    this.dialogGoodsFormVisible=false
                    this.getList()
                    //跳转场次列表页面
                    this.$router.push({ path: '/secondkill/show' })
                })
                .catch(err=>{
                    console.log(err)
                })
        }else{   //update
            secondKill.updateSession(this.goodsSave)
                 .then(response=>{
                    //修改成功提示信息
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.dialogGoodsFormVisible=false
                    this.getList()
                    //跳转场次列表页面
                    this.$router.push({ path: '/secondkill/show' })
                })
                .catch(err=>{
                    console.log(err)
                })
        }
       

        
    },
    //场次信息修改
    updateGoods(good){
        this.goodsSave.id=good.id
        this.goodsSave.name=good.name
        this.goodsSave.endTime=good.endTime
        this.goodsSave.startTime=good.startTime
        this.goodsSave.status=good.status
        this.goodsSave.save=false
        this.dialogGoodsFormVisible=true
       
    },
    resetData(){  //清空的方法
        //表单输入项数据清空
        // this.teacherQuery = {}
        //查询所有讲师数据
        this.getList()
    },
    //删除场次的方法
    removeSessionById(id){
        this.$confirm('此操作将永久删除该场次, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            //调用删除方法
            secondKill.deleteSessionId(id)
                .then(response=>{
                    //删除成功提示信息
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //回到列表页面
                    this.getList()
                })
                    
        })
    },

  },
};
</script>
<style scoped>

    .chanpterList {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .chanpterList li {
    position: relative;
    }
    .chanpterList p {
    float: left;
    font-size: 20px;
    margin: 10px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #ddd;
    }
    .chanpterList .acts {
    float: right;
    font-size: 14px;
    }

    .videoList {
    padding-left: 50px;
    }
    .videoList p {
    float: left;
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #ddd;
    }
</style>